<div class="main-container">
  <div class="row">
    <div class="free-demo-board" fGrid="12">
      <p>
        {{'DEMO.RIPPLE.DESCRIPTION' | translate}}<span class="symbol directive"></span>
      </p>
      <hr>
    </div>
    <div class="free-demo-board" fGrid="12">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;RippleModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>

    <div class="free-demo-board row" fGrid="12">
      <div fGrid="6">
        <div class="free-card-board">
          <h3 class="free-toolbar">Images</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="PREVIEW">
              <div class="ripple-image" fRipple>
                <img src="assets/images/user.jpg">
              </div>
            </free-tab>
            <free-tab header="CODE">
              <free-code lang="html">
                &lt;div class="ripple-image" fRipple&gt;
                  &lt;img src="assets/images/user.jpg"&gt;
                &lt;/div&gt;
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>
      <div fGrid="6">
        <div class="free-card-board">
          <h3 class="free-toolbar">Text</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="PREVIEW">
              <div class="ripple-image" fRipple="rgba(0,0,0,.5)">
                {{'DEMO.RIPPLE.DESCRIPTION' | translate}}
              </div>
              <div class="ripple-image" fRipple="red">
                {{'DEMO.RIPPLE.DESCRIPTION' | translate}}
              </div>
            </free-tab>
            <free-tab header="CODE">
              <free-code lang="html">
                &lt;div class="ripple-image" fRipple="rgba(0,0,0,.5)"&gt;
                {{'DEMO.RIPPLE.DESCRIPTION' | translate}}
                &lt;/div&gt;
                &lt;div class="ripple-image" fRipple="red"&gt;
                {{'DEMO.RIPPLE.DESCRIPTION' | translate}}
                &lt;/div&gt;
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
